<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <link rel="stylesheet" href="base.css">
    <style>
        #prompt{
            font-size: 12px;
            color: darkgray;
        }
        #score{
            border: 1px solid darkgray;
        }
        .right{
            color: greenyellow ! important;  
        }
        .error{
            color: red ! important;
        }

    </style>
</head>
<body>
    <div id="box">

        <label for="score">您的成绩:</label>
        <input type="text" placeholder="请输入分数" id="score">
        <span id ="prompt">请输入您的成绩</span>
    </div>
    <script>
        //获取id的函数
        function $(id){
            return typeof id ==='string' ? document.getElementById(id):null;
        }
        //失去焦点
        $('score').onblur = function(){
            var value =parseFloat(this.value) ;
            console.log(value);
            if(isNaN(value)){
                $('prompt').setAttribute('class','error');
                $('prompt').innerHTML = "错误，成绩必须是数字";
            }else if(value < 100 && value > 0){
                $('prompt').setAttribute('class','right');
                $('prompt').innerHTML = "正确";
            }else{
                $('prompt').className = 'error';
                $('prompt').innerHTML = "错误，成绩要在0到100之间";
            }
        }
        //点击恢复原来的状态（获取焦点）
        $('score').onfocus = function(){
            $('prompt').setAttribute('class','');
            $('prompt').innerHTML = "请输入您的成绩";
        }
    </script>
</body>
</html>